<template>
  <div>
    <el-card class="box-card">
      <template>
        <el-table
          :data="bookinfo"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="book_id"
            label="书号"
            width="100"
          />
          <el-table-column
            prop="book_name"
            label="书名"
            width="220"
          />
          <el-table-column
            prop="book_borrowTime"
            label="借书or预约日期"
            width="180"
          />
          <el-table-column
            prop="returndate"
            label="还书日期"
            width="180"
          />
          <el-table-column
            prop="user_state"
            label="状态"
          />
          <el-table-column
            label="操作"
            left
          >
            <template slot-scope="scoped">
              <el-button v-if="scoped.row.user_state === '借书中'" size="small" type="primary" @click="returnBook(scoped.$index,scoped.row)">还书</el-button>
              <el-button v-else size="small" @click="cancalOrder(scoped.$index,scoped.row)">取消预约</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

  </div>
</template>

<script>
import { getBookinfo, cancalBook } from '@/api/book'
import { cancalOrderBook } from '@/api/user'
import store from '@/store'
export default {
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      username: '',
      bookinfo: []
    }
  },
  async created() {
    this.initBookList()
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    // 还书的处理函数
    returnBook(index, info) {
      console.log(info)
      this.$confirm('检测到您已借此书, 是否归还?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async() => {
        const user_name = localStorage.getItem('user_name')
        await cancalOrderBook({ ...info, user_name })
        await cancalBook({ ...info, user_name })
        this.$message({
          type: 'success',
          message: '归还成功!'
        })
        this.initBookList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 取消预约的处理函数
    cancalOrder(index, info) {
      this.$confirm('检测到您已预约此书, 是否取消预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async() => {
        const user_name = localStorage.getItem('user_name')
        await cancalOrderBook({ ...info, user_name })
        await cancalBook({ ...info, user_name })
        // console.log(res.status)
        this.$message({
          type: 'success',
          message: '取消预约成功!'
        })
        this.initBookList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 初始化列表
    async initBookList() {
      const userinfo = await store.dispatch('user/getInfo')
      const books = await getBookinfo()
      console.log('userinfo', userinfo)
      // console.log('books', books)
      const userState = JSON.parse(userinfo.user_state)
      const userReTime = JSON.parse(userinfo.book_returnTime)
      // console.log('userReTime', userReTime)
      // console.log(JSON.parse(userinfo.if_user_borrowBook))
      this.bookinfo = JSON.parse(userinfo.if_user_borrowBook).map((item, index) => {
        const book = books.totalData.filter(info => info.book_name === item)
        console.log(book)
        return {
          book_id: book[0].book_id,
          book_name: book[0].book_name,
          book_borrowTime: JSON.parse(book[0].book_borrowTime),
          returndate: userReTime[index],
          user_state: userState[index]
        }
      })
      this.bookinfo.sort((a, b) => {
        return (a.book_id - 0) - (b.book_id - 0)
      })
      this.username = userinfo.user_name
    }

  }

}
</script>

<style scoped>

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
    margin: 30px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  #borrowData {
    width: 100%;
    width: 300px;
  }
    .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

